iT邦幫忙

2021 iThome 鐵人賽

DAY 18
0
Modern Web

我不會測試,所以寫Jest與React Testing Library系列 第 18

Day 18 終於寫了一個測Provider的最初版

  • 分享至 

  • xImage
  •  

來我們今天先寫一個簡單的Provider,這個Provider沒有做效能優化,也沒有把hook集結在一起就一個很單純的Provider,然後ts的型別部分,因為快速寫給大家看先用any帶過,但記得在寫的時候不要用any來寫,不然這樣會失去typescript本身帶來的優點.

sample code:

import { createContext, Dispatch, useReducer, ReactNode } from 'react';

type IContextType = {
  state: {
    name: string;
  };
  dispatch: Dispatch<any>;
};

type UserType = {
  children: ReactNode;
};

export const NameContext = createContext<IContextType>({} as IContextType);
const { Provider } = NameContext;

const reducer = (state: any, action: any) => {
  switch (action.type) {
    case 'set':
      return {
        ...state,
        name: action.payload
      };
    default:
      return state;
  }
};

const UserProvider: React.FC<UserType> = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, {
    name: 'hello'
  });
  const value = { state, dispatch };
  return <Provider value={value}>{children}</Provider>;
};

export { UserProvider };

然後我們用一個父層元件來wrap住一個Provider

import { UserProvider } from '@contexts/nameContext';
import Name from './Name';

const Prac = () => {
  return (
    <UserProvider>
      <Name />
    </UserProvider>
  );
};

export default Prac;

接下來我們去Name component

import { useContext } from 'react';
import { NameContext } from '@contexts/nameContext';

const Name = () => {
  const { state, _ } = useContext(NameContext);
  const { name } = state;

  return <div>{name}</div>;
};

export default Name;

接下來我們來寫一個最簡單的測試案例

import { render, screen, act } from '@testing-library/react';
import { UserProvider } from '@contexts/nameContext';
import Name from '../Name';

test.only('should get name from context', async () => {
  render(
    <UserProvider>
      <Name />
    </UserProvider>
  );
  const getName = screen.queryByText(/hello/i);

  expect(getName).toBeTruthy();
});

在render的時候包住Name component我們就可以在Name的元件裡接收到context所回傳的值

接下來幾天會寫別種wrap Provider的方式


上一篇
Day 17 快沒文章了 先偷渡cypress 改天改寫一下
下一篇
Day 19 Provider小Tips
系列文
我不會測試,所以寫Jest與React Testing Library30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言